<%= image_tag show_avatar(avatar),:onerror => "this.src='/data/no-image.jpg'", :class => "img-polaroid", :width => "97%" %><br/>
<br/>

<%= form_for @new_post, :url => new_post_path do |f| %>
<%= f.text_area :content, :placeholder => "What's on your mind ?", :rows => "3", :style => "width:95%", :maxlength => "500" %>
<%= hidden_field_tag "current_path", request.fullpath %>
<div id="ext_content" ></div>
<%= image_tag "/images/icon_img.gif", :width => "16", :style => "padding-bottom: 5px;cursor:pointer", :id => "post_img" %>
<%= image_tag "/images/icon_media.png", :width => "16", :style => "padding-bottom: 5px;cursor:pointer", :id => "post_media" %>
<%= post_error %>
<div style="clear:both;"></div>
<button class="btn btn-large btn-block btn-primary" type="button" onclick="post_comment()">Post</button>
<% end %>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none; ">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Copy your link to here</h3>
  </div>
  <div class="modal-body">
    <input type="text" placeholder="Copy your link here ..." style="width: 510px;" value="" id="extern_url">
    <textarea placeholder="Copy your embed here ..." style="width: 510px;height: 200px;" value="" id="extern_embed"></textarea>
    <p style="display:none;color:red;"></p>
    <input type="hidden" id="ext_style" value="" />
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="save_data">Save changes</button>
  </div>
</div>
<script type="text/javascript">
	function post_comment(){
		if($("#post_content").val()!="")
			$("#new_post").submit();
	}
	function isValidURL(url){
	    var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

	    if(RegExp.test(url)){
	        return true;
	    }else{
	        return false;
	    }
	}
	function findBaseName(url) {
	    var fileName = url.substring(url.lastIndexOf('/') + 1);
	    var dot = fileName.lastIndexOf('.');
	    return dot == -1 ? fileName : fileName.substring(0, dot);
	} 
	$(document).ready(function() {
		var order = 1;
		$('#post_img').live('click',function(e){
			$('#myModalLabel').val('Copy your link to here');
			$('#extern_url').val('');
			$('#extern_embed').val('');
			$('#extern_url').show();
			$('#extern_embed').hide();
			$('#ext_style').val('image');
			$('#myModal').modal({
  				keyboard: false
			});
		});

		$('#post_media').live('click',function(e){
			$('#myModalLabel').val('Copy your media embed to here');
			$('#extern_url').val('');
			$('#extern_embed').val('');
			$('#extern_url').hide();
			$('#extern_embed').show();
			$('#ext_style').val('media');
			$('#myModal').modal({
  				keyboard: false
			});
		});		

		$('#save_data').live('click',function(e){
			if($('#ext_style').val() == 'image'){
				var ex_url = $('#extern_url').val();
				if($.trim(ex_url) == ''){
					$('.modal-body p').html('<i>Please input your url !</i>');
					$('.modal-body p').show();
					return false;
				}else{
					if(isValidURL(ex_url) == false){
						$('.modal-body p').html('<i>Please input a valid url !</i>');
						$('.modal-body p').show();
						return false;					
					}
				}
				$('#ext_content').append('<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert">x</button><i>' + findBaseName(ex_url) + '</i><input type="hidden" name="ext_content[' + order +'][image]" value = "' + ex_url + '" /></div>');
			}else{
				var ex_embed = $('#extern_embed').val();
				if($.trim(ex_embed) == ''){
					$('.modal-body p').html('<i>Please input your media embed code !</i>');
					$('.modal-body p').show();
					return false;
				}
				$('#ext_content').append('<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert">x</button><i>Media</i><textarea style="display:none;" name="ext_content[' + order +'][media]" >' + ex_embed + '</textarea></div>');
			}

			$('.modal-body p').hide();
			order++;
			$('#myModal').modal('hide');
		});	

	});
</script>